<template>
	<div class="order">
		<div class="order-top">
			<h3>全部订单</h3>
			<p>查看全部<i class="iconfont icon-jiantouyou"></i></p>
		</div>
		<div class="order-right">
			<ul>
				<li v-for="item in imgs " :key="item.id">
					<router-link to="/">
						<div class="order-right-contxt">
							<img :src="item.imgUrl" >
							<p>{{item.title}}</p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Order',
		data() {
			return{
				imgs:[
					{id:1,imgUrl:require('@/assets/img/Urse-order1.png'),title:'待付款'},
					{id:2,imgUrl:require('@/assets/img/Urse-order2.png'),title:'已付款'},
					{id:3,imgUrl:require('@/assets/img/Urse-order3.png'),title:'待评价'},
					{id:4,imgUrl:require('@/assets/img/Urse-order4.png'),title:'退款/售后'}
				]
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.order{
		width: 100%;
		margin: -0.7rem auto 0.5rem;
		height: 2.6rem;
		background-color: #ffffff;
	}
	.order .order-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		height: 40%;
		margin: 0 auto;
	}
	.order-top h3{
		font-size: 0.38rem;
	}
	.order-top p{
	color: #b3b3b3;
	}
	.order-top p i{
		font-size: 0.2rem;
		margin-left: 0.05rem;
	}
	.order-right{
		width: 100%;
		height: 60%;
	}
	.order-right ul{
		height: 100%;
		height: 100%;
	}
	.order-right ul li{
		float: left;
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.order-right ul li .order-right-contxt{
		text-align: center;
	}
	.order-right ul li .order-right-contxt img{
		height:0.8rem;
		width:0.8rem;
	}
	.order-right ul li .order-right-contxt p{
		line-height: 0.6rem;
	}
</style>
